import React from 'react';
import { Table,Modal } from 'antd';
import { EditableRow,EditSelectCell } from '../EditTaleComponent';
import { typeMap } from 'src/pages/DataManage/typeMap';
import { renameField, resetRenameField } from 'src/services/DataManage';

interface Iprops {
	modalVisibleValue:boolean
	FieldData:any
	modalVisible:any
	joinComponentFunc:any
	setOutDataFunc:any
}

export default class RenameFields extends React.Component<Iprops> {
    state = {
    	dataSource: [],
    };
    
    //finalFieldDesc: "id"
    // finalFieldName: "id"
    columns = [
    	{
    		title: '字段',
    		dataIndex: 'name',
    	},
    	{
    		title: '类型',
    		dataIndex: 'type',
    		selectable: true,
    		editable: false,
    	},
    	{
    		title: '字段名称',
    		dataIndex: 'desc',
    		editable: true,
    		selectable: false,
    	},
    ];

    //数据更改保存事件
    handleSave = row => {
    	const newData = [ ...this.state.dataSource ];
    	const index = newData.findIndex( item => row.key === item.key );
    	const item = newData[index];
    	newData.splice( index, 1, {
    		...item,
    		...row,
    	} );
    	
    	this.setState( { dataSource: newData } );
    };
	
    //提交
	handelSubmit = async () => {
		// this.handelCancel();
		let tmp = this.state.dataSource.map( item => {return { name: item.id,desc: item.desc,type: item.type };} );
		let info = null;
		//编辑修改
		if( this.props.FieldData.edit ) {
			const { code,name } = this.props.FieldData;
			info = await resetRenameField( { data: { fields: tmp,componentCode: code,componentName: name,'position': 1 } } );
		}else {
			//引入新增
			info = await renameField( { data: { fields: tmp, 'modelId': this.props.FieldData.modelId, 'position': 1 } } ); 
		}
		if( info.data.success ) {
			const data =  info.data.data;
			let toData = { ...data,
				edit: this.props.FieldData.edit,
				nodeType: 'RenameFields',
				style: { 'primaryColor': '#0066FF' },
				shape: 'SimplicityNode' };
			this.props.joinComponentFunc( this.props.FieldData,toData,{} );
			this.handelCancel();
		}
		
	}
	
	//取消
	handelCancel = () => {
		this.props.modalVisible( 'fieldRenameVisible',false );
		this.setState( { dataSource: [] } );
		let data = this.props.FieldData;
		delete data.edit;
		this.props.setOutDataFunc( data );
	}
	
	
	componentDidUpdate( prevProps: Readonly<Iprops>, prevState: Readonly<{}>, snapshot?: any ): void {
		if( ( JSON.stringify( prevProps.FieldData ) !== JSON.stringify( this.props.FieldData ) )
			||( this.props.FieldData.model.fieldMappings.length >0 &&this.state.dataSource.length ===0 ) ) {
			let data = this.props.FieldData.model.fieldMappings.map( item => {
				return {
					name: item.finalFieldName,
					type: item.finalFieldType,
					desc: item.finalFieldDesc,
					id: item.tempFieldName,
					key: item.key
				};
			} ); 
			this.setState( { dataSource: data, } );
		}
	}


	render() {
    	const components = {
    		body: {
    			row: EditableRow,
    			cell: EditSelectCell
    		},
    	};
    	const columns = this.columns.map( col => {
    		if ( !col.editable&&!col.selectable ) {
    			return col;
    		}else if( col.editable ) {
    			return {
    				...col,
    				onCell: record => ( {
    					record,
    					editable: col.editable,
    					dataIndex: col.dataIndex,
    					selectable: col.selectable,
    					title: col.title,
    					handleSave: this.handleSave,
    				} ),
    			};
    		}else{
    			return {
    				...col,
    				onCell: record => ( {
    					record,
    					editable: col.editable,
    					selectable: col.selectable,
    					dataIndex: col.dataIndex,
    					title: col.title,
    					handleSave: this.handleSave,
						selections: typeMap,
    				} ),
    			};
    		}
    		
    	} );

		let title = '字段重命名';
		if( this.props.FieldData.edit ) {
			title += ' (编辑)';
		}
    	return (
    		<Modal okText={'确定'}
				   cancelText={'取消'}
				   title={title}
				   onOk={this.handelSubmit}
				   onCancel={this.handelCancel}
				   width={800} mask={false} maskClosable={false}
				   visible={this.props.modalVisibleValue}>
    			<Table
    				pagination={false}
    				components={components}
					scroll={{ x: true,y: 600 }}
    				rowClassName={() => 'editable-row'}
    				bordered
    				dataSource={this.state.dataSource}
    				columns={columns}
    			/>
    		</Modal>
    	);
	}
}